<template>
	<view class="pg-30">
		<view class="border-rs20 pg-30 bgColor-white">
			<text class="font-30 font-w">退款商品</text>
			<view class="goodItems d-flex mt-30" v-for="(item,index) in goodsData.list" :key='index'>
				<view class="">
					<image :src="item.goods_logo" mode="aspectFill"></image>
				</view>
				<view class="flex-grow1 d-flex flex-d jfy-sb ml-20">
					<text class="text-overflow2">{{item.goods_title}}</text>
					<view class="d-flex jfy-sb" style="margin-bottom: 10rpx;">
						<text class="pay font-24">￥{{item.price_real}}</text>
						<text class="font-24">x{{item.number_goods}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="border-rs20 pg-30 bgColor-white mt-30">
			<text class="font-30 font-w">退款商品</text>
			<x-card-strip :border='false' leftText="退款原因" @cardEvent='this.$refs.erweima.show()' :rightText='reasonText'></x-card-strip>
			<x-card-strip :border='false' leftText="退款金额" :iconStatus='false' :rightText='"￥"+goodsData.refund_price'
				rightTextColor='#D10000'></x-card-strip>
			<view class="d-flex-yCenter-sb py-20 randerBox">
				<text>退回方式</text>
				<view class="d-flex-yCenter right">
					<text @tap='actve=index' :class="index==actve?'actve':''" v-for="(item,index) in ['退款','退货']" :key='index'>{{item}}</text>
				</view>
			</view>
		</view>
		<view class="border-rs20 pg-30 bgColor-white mt-30" style="margin-bottom: 120rpx;">
			<text class="font-30 font-w">补充描述</text>
			<view class="texter">
				<textarea class="pg-30 mt-30 " v-model.trim="remark" placeholder="补充描述，有助于商家更好的处理售后问题" />
				<view class="imgBox d-flex">
					<image v-if="thimg.length<4" @tap='changeImg' src="../static/shangchuantupian.png" mode=""></image>
					<view class="position-r" v-for="(item,index) in thimg" :key='index'>
						<image @tap='deleteImg(index)' class="xx" src="../static/img_icon_delete.png" mode=""></image>
						<image @tap='$tool.previmg(item)' :src="item" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="position-flex-bottom px-30 py-20 bgColor-white" style="z-index: 10;">
			<view class="btn" @tap='submit'>提交申请</view>
		</view>
		<!-- 退款原因 -->
		<popup ref='erweima' type='bottom' radius='6'  height='660' centerAnim='slide-up'
			:showCloseIcon='true' :maskClickClose='false' :duration='300' >
			<view class="pg-30 mt-30 d-flex flex-d">
				<text @tap='reasonText=item;$refs.erweima.hide()' class="d-inline-block py-20 border-b" v-for="(item,index) in reason" :key='index'>{{item}}</text>
			</view>
		</popup>
	</view>
</template>

<script>
	import {
		http_user_order_refund_back_order_info,
		http_user_order_refund_app_view as getRefundData,
		http_user_order_refund_appeal,
		http_user_order_refund_amend_appeal
	} from '@/config/apiRouter.js'
	import popup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			popup
		},
		data() {
			return {
				actve:1,// 退回方式
				remark:'',
				order_no:'',
				order_list_id:null,
				goodsData:{
					list:[],
					price_total:''
				},
				thimg: [],
				reason: [],
				count: 4,
				reasonText:'请选择',
				refund_all:'',	/* 1整单 0 单腿 */
				type:0,// =1 修改申请
				refund_order_no:''
			}
		},
		onLoad(opens) {
			this.order_no=opens.order_no
			if(opens.order_list_id)this.order_list_id=opens.order_list_id
			if(opens.type)this.type=opens.type
			if(opens.refund_order_no)this.refund_order_no=opens.refund_order_no
			this.refund_all=opens.refund_all
			console.log(opens);
			let data={
					order_no:this.order_no,
				}
			// if(this.refund_all==0)data.order_list_id=this.order_list_id
			getRefundData({
				data
			}).then(res=>{
				this.goodsData=res.data
				console.log(res);
			})
			http_user_order_refund_back_order_info().then(res => {
				this.reason = res.data.reason
			})
		},
		methods: {
			async submit(){
				if(this.reasonText=='请选择'){
					this.$tool.showToast('请选择退货原因')
					return
				}
				if(this.remark==''){
					this.$tool.showToast('请输入补充描述')
					return
				}
				if(!this.thimg.length){
					this.$tool.showToast('请上传描述图片')
					return
				}
				let arr=[]
				for (let item of this.thimg) {
					let url= await this.updateFile({
						url:item
					})
					if(url.code==200)arr.push(url.data.url)
				}
				
				let data={
					order_no:this.order_no,
					is_back_goods:this.actve,
					remark:this.remark,
					reason:this.reasonText,
					images:arr.join('|'),
				}
				if(this.refund_all==0){
					data.order_list_id=this.goodsData.list[0].id,
					data.number=this.goodsData.list[0].number_goods
				}
				data.refund_order_no=this.refund_order_no
				if(this.type==0){
					http_user_order_refund_appeal({
						data
					}).then(res=>{
						uni.showModal({
							title:'提示',
							content:'申请成功，等待审核',
							showCancel:false,
							success:res=>{
								this.$tool.navigateBack()
							}
						})
					})
					return
				}
				// 修改申请
				http_user_order_refund_amend_appeal({
					data
				}).then(res=>{
					uni.showModal({
						title:'提示',
						content:'修改成功，等待审核',
						showCancel:false,
						success:res=>{
							this.$tool.navigateBack()
						}
					})
				})
			},
			deleteImg(e) {
				this.thimg.splice(e, 1)
			},
			changeImg() {
				this.count = 4 - this.thimg.length
				uni.chooseImage({
					count: this.count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.thimg = this.thimg.concat(res.tempFilePaths)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #F5F5F5;
	}

	.goodItems {
		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
		}

		.pay {
			color: #CD0101;
		}
	}
	.randerBox{
		.right{
			text{
				display: inline-block;
				padding: 8rpx 26rpx;
				background: #ddd;
				font-size: 24rpx;
			}
			.actve{
				background: #FF890B;
				color: #fff;
			}
		}
	}
	.texter {
		position: relative;

		textarea {
			width: 100%;
			height: 240rpx;
			font-size: 24rpx;
			background: #F5F5F5;
			border-radius: 12rpx;
		}

		.imgBox {
			position: absolute;
			bottom: 10rpx;
			left: 20rpx;
			z-index: 9;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 10rpx;
			}

			.xx {
				position: absolute;
				top: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.btn {
		width: 690rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background: #FF890B;
		border-radius: 40rpx;
	}
</style>
